<template>
    <div style="width: auto;height: 261px" id="rightTop">
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'RightTop',
    data() {
        return {
            // option配置
            option: {
                title: {
                    text: '销量图书排行',
                    left: 'center'
                },
                color: ['#d84430'],
                tooltip: {
                    show: true
                },
                yAxis: {
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        inside: true,
                        verticalAlign: 'top',
                        lineHeight: 40,
                        color: '#0926d9',
                        formatter: function (value, index) {   // 设置y轴文字的颜色
                            if (index > 2) {
                                return '{first|' + value + '}'
                            } else {
                                return '{other|' + value + '}'
                            }
                        },
                        rich: {
                            other: {
                                color: '#000000',
                            },
                            first: {
                                color: '#cd0303'
                            }
                        }
                    },
                    data: ['No.5 万族之劫', 'No.4 太域', 'No.3 一剑独尊', 'No.2 遮天', 'No.1 完美世界'],
                },
                xAxis: {
                    nameTextStyle: {
                        color: 'rgba(255, 255, 255, 0.8)',
                        align: 'right'
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: 'rgba(255, 255, 255, 0.8)'
                    },
                },
                grid: {
                    top: '5%',
                    bottom: '0%',
                    left: '3%',
                    right: '0%'
                },
                series: [{
                    name: '销量排行榜',
                    barWidth: 15,
                    type: 'bar',
                    data: [35, 62, 85, 95, 105],
                    itemStyle: {
                        normal: {
                            borderRadius: [3, 20, 20, 3],
                            color: function (params) {   // 设置柱形图的颜色
                                if (params.dataIndex === 4) {
                                    return '#d84430'
                                } else if (params.dataIndex === 3) {
                                    return '#f38237'
                                } else if (params.dataIndex === 2) {
                                    return '#e2aa20'
                                } else if (params.dataIndex === 1) {
                                    return '#46932a'
                                } else {
                                    return '#93aaac'
                                }
                            }
                        },
                    }
                }]
            }
        }
    },
    mounted() {
        this.echartsInit()
    },
    methods: {
        echartsInit() {
            // 在生命周期中挂载
            echarts.init(document.getElementById('rightTop')).setOption(this.option)
        }
    }
}
</script>

<style scoped>

</style>
